@charset "utf-8";

//rest------------------------------------------------------------------------------------------------
* {
  margin: 0;
  padding: 0;
  font-family:"microsoft yahei";
}
li{ list-style: none;}
a{text-decoration: none;}
img{
    border: none;
}

audio{display: none;}

//public------------------------------------------------------------------------------------------------

body{
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    margin: 0 auto;
    overflow: hidden;
    background: #6f0101;
   
}

img{
    display: block;
    width: 100%;
}

.box{//每个大容器通用
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    overflow: hidden;
}


.el(@width,@top:auto,@left:auto,@right:auto){//简化CSS  width top left right
    position: absolute;
    width: @width;
    top: @top;
    left: @left;   
    right: @right; 
}


.next{
    .el(1rem,auto,3.25rem,auto);
    bottom: 0.5rem;
}

.logo{
    .el(2.28rem,0.25rem,0.25rem,auto);
}

.music{
    .el(0.7rem,0.25rem,auto,0.25rem);
    z-index: 1000;
}

.play{
    animation: play 1s linear 0s infinite normal;
}
@keyframes play{
        
    0%{
        transform: rotate(0deg);
    }
   
    100%{
        transform: rotate(360deg);
    }
}

.page{
    //display: none;
}

.car{
    .el(7.19rem,8rem,0.15rem,auto);
    opacity: 0;
    animation:car 1s linear 2s 1 normal;
    -webkit-animation:car 1s linear 2s 1 normal;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    transform: scale(0.2);
}
@keyframes car{
    
    0%{
         opacity: 0;
         transform: scale(0.2);
    }
   
    100%{
        opacity: 1;
        top:9rem;
        transform: scale(1);
    }
}
@-webkit-keyframes car{
    
    0%{
         opacity: 0;
         transform: scale(0.2);
    }
   
    100%{
        opacity: 1;
        top:9rem;
        transform: scale(1);
    }
}


//step1  首页------------------------------------------------------------------------------------------------
.step1{
    .box;

    
    
    
    .bigLogo{
        .el(2.62rem,3.5rem,2.44rem,auto);
        z-index: 100;
    }
    
    .xd{
        .el(7.5rem,0rem,0,0);
    }
    
    
    
    .mialHead{
        .el(7.5rem,0rem,0,0);
        z-index: 10;
    }
    
    .mialBody{
        .el(7.5rem,2.7rem,0,0);
        
      
    }
    
    
    .han{
        .el(4.19rem,8rem,1.65rem,auto);
    }
    
    .enter{
        .el(2.33rem,9.3rem,2.58rem,auto);
    }
    
    .star{
        .el(7.5rem,10.5rem,0,0);
    }
    
    
    
}

//step2 五星车辆集团2018商务年会
.step2{
    .box;
    background: url(../img/step2.jpg) no-repeat center top;
    background-size: 100%;
    display: none;
    
    
    
    
    .yuan{
        .el(5.32rem,1.7rem,1.09rem,auto);
        
        animation:yuan 4s linear 1s infinite normal;
        -webkit-animation:yuan 4s linear 1s infinite normal;
        
        @keyframes yuan{
        
            0%{
                transform: rotate(0deg);
            }
           
            100%{
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes yuan{
        
            0%{
                transform: rotate(0deg);
            }
           
            100%{
                transform: rotate(360deg);
            }
        }
    }
    
    .text1{
        .el(6.22rem,3.4rem,0.64rem,auto); 
    }
    .text2{
        .el(4.98rem,4.4rem,1.26rem,auto); 
    }
    
    
}


//尊敬的经销商朋友们
.step3{
    .box;
    background: url(../img/step3.jpg) no-repeat center top;
    background-size: 100%;
    display: none;
    
    .jxs{
        .el(4.73rem,1.9rem,1.38rem,auto); 
    }
    .forText{
        .el(6rem,3.1rem,0.75rem,auto); 
        overflow: hidden;
        opacity: 0;
        animation: forText 4s linear 1s 1 normal;
        -webkit-animation: forText 4s linear 1s 1 normal;
        animation-fill-mode: forwards;
    }
    @keyframes forText{
        
        0%{
            height: 0rem;
            
        }
        1%{
            height: 0rem;
            opacity: 1;
        }
        100%{
           height: 6.5rem;
           opacity: 1;
       }
           
    }
    @-webkit-keyframes forText{
        
        0%{
            height: 0rem;
            
        }
        1%{
            height: 0rem;
            opacity: 1;
        }
        100%{
           height: 6.5rem;
           opacity: 1;
       }
           
    }
}

//尊敬的经销商朋友们
.step4{
    .box;
    background: url(../img/step4.jpg) no-repeat center top;
    background-size: 100%;
    display: none;
    
    .hdlc{
        .el(3.95rem,2.2rem,(7.5-3.95)/2rem,auto); 
    }
    
    .telImg{
        .el(0.25rem,3.2rem,6.1rem,auto); 
    }
    
    a{
        display: block;
        width: 3rem;
        height: 0.4rem;
        position: absolute;
        left: 4rem;
    }
    .tel1{
        top:6.8rem;
    }
    .tel2{
        top:7.35rem;
    }
   
    .hdInfo{
        .el(7.5rem,3.7rem,0,0); 
        overflow: hidden;
        opacity: 0;
        animation: hdInfo 4s linear 1s 1 normal;
        -webkit-animation: hdInfo 4s linear 1s 1 normal;
        animation-fill-mode: forwards;
    }
    
    @keyframes hdInfo{
        
        0%{
            height: 0rem;
            
        }
        1%{
            height: 0rem;
            opacity: 1;
        }
        100%{
           height: 6.5rem;
           opacity: 1;
       }
           
    }
    @-webkit-keyframes hdInfo{
        
        0%{
            height: 0rem;
            
        }
        1%{
            height: 0rem;
            opacity: 1;
        }
        100%{
           height: 6.5rem;
           opacity: 1;
       }
           
    }
    
    .dian{ 
        .el(0.29rem,3.7rem,2.45rem,auto);
        animation: dian 1s linear 0s infinite alternate;
        -webkit-animation: dian 1s linear 0s infinite alternate;
    }
    
    @keyframes dian{
        0%{
            opacity: 1;
        }
       
        100%{
            opacity: 0;
       }
    }
    @-webkit-keyframes dian{
        0%{
            opacity: 1;
        }
       
        100%{
            opacity: 0;
       }
    }
}

//二维码
.step5{
    .box;
    background: url(../img/step5.jpg) no-repeat center top;
    background-size: 100%;
    display: none;
    
    .ma{
        .el(3.61rem,2.2rem,(7.5-3.61)/2rem,auto); 
        z-index: 10;
    }
    
    .jqr{
        position: absolute;
        width: 2.7rem;
        top:7.4rem;
        left: 2.4rem;
        opacity: 0;
        animation: jqr 2s linear 1s 1 normal;
        -webkit-animation: jqr 2s linear 1s 1 normal;
        animation-fill-mode: forwards;
        
      
        
    }
    
    @keyframes jqr{
        0%{
            opacity: 1;
            transform: scale(0.2);
            left: 1.9rem;
            top:3.9rem;
        }
        50%{
            transform: scale(0.6);
            left: 0.1rem;
            top:5.8rem;
        }
        100%{
             opacity: 1;
           transform: scale(1);
           left: 2.4rem;
           top:7.4rem;
       }
    }
    @-webkit-keyframes jqr{
        0%{
            opacity: 1;
            transform: scale(0.2);
            left: 1.9rem;
            top:3.9rem;
        }
        50%{
            transform: scale(0.6);
            left: 0.1rem;
            top:5.8rem;
        }
        100%{
             opacity: 1;
           transform: scale(1);
           left: 2.4rem;
           top:7.4rem;
       }
    }
}




//step1 动画

.ani{
    
    .bigLogo{
        
        animation:disLogo 0.3s linear;
        -webkit-animation:disLogo 0.3s linear;
        animation-fill-mode: forwards;
        
    }
    @keyframes disLogo{
        
        0%{
            
        }
       95%{
            opacity: 1;
        }
        100%{
            transform: scale(0.4);
            opacity: 0;
        }
    }
    
    @-webkit-keyframes disLogo{
        
        0%{
            
        }
       95%{
            opacity: 1;
        }
        100%{
            transform: scale(0.4);
            opacity: 0;
        }
    }
    
    .mialHead{
        animation:mialHead 0.4s linear 0.4s normal;
        -webkit-animation:mialHead 0.4s linear 0.4s normal;
        animation-fill-mode: forwards;
    }
    
     @keyframes mialHead{
        
        0%{
           top:0; 
        }
        
        100%{
            top:-5.2rem;
        }
    }
    @-webkit-keyframes mialHead{
        
        0%{
           top:0; 
        }
        
        100%{
            top:-5.2rem;
        }
    }
    
    .xd{
        animation:xd 1.5s linear 1s normal;
        -webkit-animation:xd 1.5s linear 1s normal;
        animation-fill-mode: forwards;
    }
    
    @keyframes xd{
        
        0%{
           
        }
        
        100%{
            top:14rem;
        }
    }
    @-webkit-keyframes xd{
        
        0%{
           
        }
        
        100%{
            top:14rem;
        }
    }
    
    .mialBody{
        animation:mialBody 1.5s linear 1s normal;
        -webkit-animation:mialBody 1.5s linear 1s normal;
        animation-fill-mode: forwards;
    }
    
    @keyframes mialBody{
        
        0%{
        }
        100%{
            top:16.7rem;
        }
    }
    @-webkit-keyframes mialBody{
        0%{
        }
        100%{
            top:16.7rem;
        }
    }
    
    
//  .step2{
//      animation:step2 0.5s linear 2.5s normal;
//      -webkit-animation:step2 0.5s linear 2.5s normal;
//      animation-fill-mode: forwards;
//  }
//  
//  @keyframes step2{
//      0%{
//         transform: scale(0.8);
//      }
//      
//      25%{
//         transform: scale(0.9);
//      }
//      
//      50%{
//          transform: scale(0.8);
//      }
//      75%{
//          transform: scale(0.9);
//      }
//      100%{
//          transform: scale(1);
//      }
//  }
//  
//  @-webkit-keyframes step2{
//      0%{
//         transform: scale(0.8);
//      }
//      
//      25%{
//         transform: scale(0.9);
//      }
//      
//      50%{
//          transform: scale(0.8);
//      }
//      75%{
//          transform: scale(0.9);
//      }
//      100%{
//          transform: scale(1);
//      }
//  }
    
}
